<template>
  <div>
    <el-card class="box-card">
      <!--  头部    -->
      <template #header>
        <div class="detail">
          <span>挂号详情</span>
        </div>
      </template>
      <!--  正文  -->
      <div class="top">
        <el-tag type="success"
          >√ {{ orderDetail.param?.orderStatusString }}
        </el-tag>
        <div class="right">
          <img alt="" src="../../../assets/images/code_app.png" />
          <div class="qrCode">
            <p>
              微信
              <svg
                class="icon"
                height="16"
                p-id="2601"
                t="1719554776167"
                version="1.1"
                viewBox="0 0 1024 1024"
                width="16"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                  fill="#28C445"
                  p-id="2602"
                ></path>
                <path
                  d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                  fill="#28C445"
                  p-id="2603"
                ></path>
              </svg>
              关注 “北京114预约挂号”
            </p>
            <p>"快速预约挂号"</p>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="bottom">
          <div class="left">
            <el-descriptions :column="1" border direction="horizontal">
              <el-descriptions-item :align="'right'" label="就诊人信息"
                >{{ orderDetail.patientName }}
              </el-descriptions-item>
              <el-descriptions-item :align="'right'" label="就诊日期"
                >{{ orderDetail.fetchTime }}
              </el-descriptions-item>
              <el-descriptions-item :align="'right'" label="就诊医院"
                >{{ orderDetail.hosname }}
              </el-descriptions-item>
              <el-descriptions-item :align="'right'" label="就诊科室">
                {{ orderDetail.depname }}
              </el-descriptions-item>
              <el-descriptions-item :align="'right'" label="医生职称">
                {{ orderDetail.title }}
              </el-descriptions-item>
              <el-descriptions-item :align="'right'" label="医师服务费">
                {{ orderDetail.amount }}
              </el-descriptions-item>
              <el-descriptions-item :align="'right'" label="挂号单号">
                {{ orderDetail.outTradeNo }}
              </el-descriptions-item>
              <el-descriptions-item :align="'right'" label="挂号时间">
                {{ orderDetail.reserveDate }}
              </el-descriptions-item>
            </el-descriptions>
            <div
              v-if="
                orderDetail.orderStatus === 0 || orderDetail.orderStatus === 1
              "
              class="btn"
            >
              <el-popconfirm title="是否取消预约?" @confirm="cancelOrder">
                <template #reference>
                  <el-button>取消预约</el-button>
                </template>
              </el-popconfirm>

              <el-button
                v-if="orderDetail.orderStatus === 0"
                type="primary"
                @click="createQrCode"
                >支付
              </el-button>
            </div>
          </div>
          <div class="right">
            <el-card>
              <template #header>
                <div>
                  <span>注意事项</span>
                </div>
              </template>
              <div>
                <p>
                  1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担;
                </p>
                <p>
                  2.【取号】就诊当天需在{{ orderDetail.fetchTime }}
                  在医院取号，未取号视为爽约，该号不退不换;
                </p>
                <p>
                  3.【退号】{{
                    orderDetail.quitTime
                  }}前可在线退号，逾期将不可办理退号退费;
                </p>
                <p>
                  4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用
                  的有效身份证件到院取号;
                </p>
                <p>
                  5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。
                </p>
              </div>
            </el-card>
          </div>
        </div>
      </template>
    </el-card>
    <!-- 展示支付二维码   -->
    <div>
      <el-dialog v-model="toPay" title="微信支付" width="600" @close="closePay">
        <div class="pay">
          <img :src="payCodeUrl" />
          <p>请使用微信扫一扫</p>
          <p>扫描二维码支付</p>
        </div>
        <template #footer>
          <el-button type="primary" @click="closePay">关闭窗口</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script lang="ts" name="OrderDetail" setup>
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import {
  doCancelOrder,
  doCreateNative,
  doGetOrder,
  doGetPayStatus,
} from "@/api/user.ts";
import { OrderInfo } from "@/types/types.ts";
// 引入qrcode
import qrCode from "qrcode";
import { ElMessage } from "element-plus";
// 展示支付二维码
let toPay = ref<boolean>(false);
let payCodeUrl = ref<string>("");
let route = useRoute();
let timer = ref<any>();
// 订单详情
let orderDetail = ref<OrderInfo>({});
onMounted(() => {
  // 订单详情
  getOrderDetail();
});
const getOrderDetail = async () => {
  if (!route.query.orderId) {
    return;
  }
  let data = await doGetOrder(route.query.orderId);
  orderDetail.value = data;
};
// 关闭支付弹窗
const closePay = () => {
  toPay.value = false;
  clearInterval(timer.value);
};
// 取消预约
const cancelOrder = async () => {
  await doCancelOrder(route.query.orderId);
};
// 创建支付二维码
const createQrCode = async () => {
  toPay.value = true;
  let data = await doCreateNative(route.query.orderId);
  // 生成二维码
  payCodeUrl.value = await qrCode.toDataURL(data.codeUrl);

  timer.value = setInterval(async () => {
    let isPay = await doGetPayStatus(route.query.orderId);
    if (isPay) {
      toPay.value = false;
      ElMessage.success("支付成功");
      clearInterval(timer.value);
      getOrderDetail();
    }
  }, 2000);
};
</script>

<style lang="scss" scoped>
.box-card {
  .top {
    display: flex;
    justify-content: space-between;
    padding: 10px;

    .right {
      display: flex;
      justify-content: space-between;
      align-items: center;

      img {
        width: 40px;
        height: 40px;
      }

      .qrCode {
        margin-left: 10px;

        p {
          font-size: 12px;
          line-height: 30px;
        }
      }
    }
  }

  .bottom {
    display: flex;
    margin-top: 20px;

    .left {
      flex: 4;

      .btn {
        margin-top: 20px;
      }
    }

    .right {
      flex: 6;
      margin-left: 40px;

      p {
        line-height: 30px;
      }

      p:nth-child(2) {
        color: red;
        font-weight: 600;
      }
    }
  }
}

.pay {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;

  p {
    line-height: 30px;
  }
}

::v-deep(.el-dialog__body) {
  border-top: 1px solid #7f7f7f;
  border-bottom: 1px solid #7f7f7f;
}
</style>
